/* 联系我们 */
<template>
  <div class="relation">
    <BannerImg url="relation/banner.jpg"></BannerImg>
    <Row class="floorW" :gutter="16">
      <Col :lg="16" class="left">
        <Card style="height:400px" :padding="0">
          <baidu-map
            class="map"
            :center="{lng: 113.889382, lat: 35.280653}"
            :zoom="19"
            :scroll-wheel-zoom="true"
          >
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
            <bm-marker
              :position="{lng: 113.889302, lat: 35.280653}"
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE"
            >
              <bm-label
                content="T11艺术中心"
                :labelStyle="{color: 'red', fontSize : '24px'}"
                :offset="{width: -35, height: 30}"
              />
            </bm-marker>
          </baidu-map>
        </Card>
      </Col>
      <Col :lg="8" class="right">
        <Card style="height:400px">
          <p slot="title" class="fS30">
            T11艺术中心
            <span class="fS14">南城校区</span>
          </p>
          <p slot="title">河南柠檬教育咨询有限公司</p>
          <div class="content">
            <img src="../assets/images/relation/ewm.jpg" alt>
            <p>地址：新乡市科隆大道劳动路交叉口西南角</p>
            <p>电话：0373-7117111</p>
            <p>手机：18790506336(微信同号)</p>
            <p>邮箱：666688888@qq.com</p>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="floorW">
      <Col :lg="24">
        <div class="title">
          <img src="../assets/images/relation/title-1.png" alt srcset>
        </div>
        <!-- 职业发展 -->
        <div class="zyfz">
          <p>
            充足的
            <span class="fS30">成长空间</span>，完善的
            <span class="fS30">晋升机制</span>，
          </p>
          <p>
            丰富的
            <span class="fS30">轮岗学习机会</span>，多样化的
            <span class="fS30">培训</span>......
          </p>
          <p>在这里，我们成就每个人的美好未来。</p>
          <div class="zyfz-content">
            <Divider style="color:#F19FC2">发展体系</Divider>
            <Divider style="color:#F19FC2">培训体系</Divider>
            <Divider style="color:#F19FC2">培训方法</Divider>
          </div>
        </div>
      </Col>
    </Row>
    <div class="floor">
      <Row class="floorW">
        <Col :lg="24" style="text-align:center">
          <div class="title">
            <img src="../assets/images/relation/title-2.png" alt srcset>
          </div>

          <img src="../assets/images/relation/fuli-1.png" alt srcset>
          <img src="../assets/images/relation/fuli-2.png" alt srcset>
        </Col>
      </Row>
    </div>

    <Row class="floorW">
      <Col :lg="24">
        <div class="title">
          <img src="../assets/images/relation/title-3.png" alt srcset>
        </div>
        <Row type="flex" justify="center">
          <Col :lg="20">
            <!-- 招聘 -->
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">招生老师</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">课程顾问</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">web前端设计</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">平面设计</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">文案编辑</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
            <div class="zpCard">
              <div class="left">
                <p>
                  <span class="fS30">市场策划</span>
                  <span>【新乡】</span>
                </p>
                <p>
                  <span class="fS21 clor129" style="margin-right:20px">3k-5k</span> 经验不限 / 学历不限 / 专业不限 / 全职
                </p>
              </div>
              <div class="right">
                <p class="clorFC2 fS18">联系HR</p>
              </div>
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row class="floorW">
      <Col :lg="24">
        <div class="title">
          <img src="../assets/images/relation/title-4.png" alt srcset>
        </div>
        <Row>
          <Col :lg="6">
            <Card style="height:210px"></Card>
          </Col>
          <Col :lg="6">
            <Card style="height:210px"></Card>
          </Col>
          <Col :lg="6">
            <Card style="height:210px"></Card>
          </Col>
          <Col :lg="6">
            <Card style="height:210px"></Card>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    
  }
};
</script>

<style lang="less">
.map {
  width: 100%;
  height: 400px;
}
.ivu-divider-horizontal.ivu-divider-with-text-center:after,
.ivu-divider-horizontal.ivu-divider-with-text-center:before,
.ivu-divider-horizontal.ivu-divider-with-text-left:after,
.ivu-divider-horizontal.ivu-divider-with-text-left:before,
.ivu-divider-horizontal.ivu-divider-with-text-right:after,
.ivu-divider-horizontal.ivu-divider-with-text-right:before {
  border-top: 1px dashed #000 !important;
}
.relation {
  .ivu-card-head {
    p {
      height: auto !important;
      line-height: initial !important;
    }
  }
  .floor {
    width: 100%;
    background: url("../assets/images/relation/bg.jpg") no-repeat;
    background-size: 100% 100%;
  }
  .left {
    padding: 20px;
  }
  .right {
    padding: 20px;
    .ivu-card {
      .ivu-card-head {
        .fS30 {
          color: #e62129;
          span {
            color: #000;
          }
        }
      }
      .ivu-card-body {
        p {
          font-size: 18px;
        }
      }
    }
    .content {
      width: 100%;
      text-align: center;

      p {
        text-align: left;
      }
      .content {
        p {
          font-size: 18px;
        }
      }
    }
  }
  .title {
    border-bottom: 3px solid #f19fc2;
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
  }
  .zyfz {
    text-align: center;
    .zyfz-content {
      width: 70%;
      margin: auto;
    }
  }
  .zpCard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid #f19fc2;
    border-top: 1px dashed #000;
    border-right: 1px dashed #000;
    border-bottom: 1px dashed #000;
    border-radius: 10px;
    margin-bottom: 20px;
    .left {
    }
    .right {
    }
  }
}
</style>